import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../views/layout'),
    children: [
      {
        path: '/',
        component: () => import('../views/home')
      },
      {
        path: '/category/:id',
        component: () => import('../views/category')
      },
      {
        path: '/category/sub/:id',
        component: () => import('../views/category/sub')
      }
    ]
  },
  {
    path: '/login',
    name: 'pageLogin',
    component: () => import('../views/login')
  }
  //   {
  //     path: '/about',
  //     name: 'About',
  //     // route level code-splitting
  //     // this generates a separate chunk (about.[hash].js) for this route
  //     // which is lazy-loaded when the route is visited.
  //     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  //   }
]
// vue3中使用createRouter创建router实例，使用hash模式的路由
const router = createRouter({
  // 使用hash方式实现路由，createWebHashHistory代表使用hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes
})

export default router

// vue2使用new router创建实例
// import 'Vue' from 'vue'
// import 'Router' from 'vue-router'
// Vue.use(Router)
// const router = new Router({})
// export default router
